<template>
	
	<view class="top-text">
		请与22.30前上报数据
	</view>
<!-- 	<view style="flex: 10;display: flex;">
		<uni-search-bar placeholder="搜索" @confirm="search"  
	       v-model="searchValue"
		   @cancel="cancel" 
	       @clear="clear" >
		</uni-search-bar>
	</view> -->
	<view>
	    <uni-card v-for="item in cardData" :key="item.id" :data="item" class="card1.1">
	      <text>{{ item.name }}</text>
		  <text>{{ item.number }}</text><br>
		  <text>{{ item.academy }}</text><br>
	      <text>{{ item.major }}</text><br>
		  <text>{{ item.number? '数据存在' : '数据不存在' }}</text>
		  <hr/>
		  <br>
		 <text @click="showInput(item, $event)" style="cursor: pointer;">请说明原因</text>
		       <input v-if="item.showInput" v-model="item.inputValue" />
			   <br>
			   
	    </uni-card>
	  </view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import axios from 'axios';
	
	const cardData = ref([]);
	
	onMounted(() => {
	  for(var i=0;i<=4;i++){
	   axios.get('/data/data.json')
	   .then(response => {
	      cardData.value = response.data.player;
		  
	    console.info(response.data)
		})
		
		
	   .catch(error => {
	       console.error('获取数据出错：', error);
	     });
		 }
	});
	
	
	function showInput(item, event) {
	  if (event.target.textContent === '请说明原因') {
	    item.showInput = true;
	    item.inputValue = '';
	  }
	}
	
	
</script>

<style>
	.card1.1{
		  padding: 20rpx;
		  background-color: #f8f9fa;
		  border: 1px solid #e9ecef;
		  border-radius: 8rpx;
		  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	.top-text{
		background-color:papayawhip;
		height: 20px;
	}
</style>